/**
 * Created by zhouli on 18/4/25
 * Email li.zhou@huilianyi.com
 */
import React from 'react';
import {connect} from 'react-redux';
import {Card} from 'antd';
import menuRoute from 'routes/menuRoute';
import 'styles/setting/role-setting/role-setting.scss';
import RoleReceiptImg from 'images/setting/role-setting/role-receipt.png';
import adminImg from 'images/setting/role-setting/admin.png';
import financingImg from 'images/setting/role-setting/financing.png';
import bookerImg from 'images/setting/role-setting/booker_role.png';
import dataImg from 'images/setting/role-setting/data.png';
import {messages} from "share/common";
const {Meta} = Card;
class RoleSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      roleDetails: [
        {
          name: messages('setting.key960'/*财务*/),
          path: menuRoute.getRouteItem('role-setting-finance').url,
          title: messages('setting.key961'/*财务人员*/),
          description: messages('setting.key962'/*适用于财务人员管理*/),
          detail: messages('setting.key963'/*权限详情：可为不同财务角色设置不同财务权限*/),
          cover: financingImg,
          newPermissionNeedShow: false,//新权限启用之后，是否显示
          needHide: !this.props.tenantMode
        },
        {
          name: messages('setting.key964'/*管理员*/),
          path: menuRoute.getRouteItem('role-setting-admin').url,
          title: messages('setting.key964'/*管理员*/),
          description: messages('setting.key965'/*适用于管理员*/),
          detail: messages('setting.key966'/*权限详情：企业系统设置超级权限*/),
          newPermissionNeedShow: false,//新权限启用之后，是否显示
          cover: adminImg
        },
        {
          name: messages('setting.key967'/*订票*/),
          path: menuRoute.getRouteItem('role-setting-booking').url,
          title: messages('setting.key968'/*订票人员*/),
          description: messages('setting.key969'/*适用于订票人员管理*/),
          detail: messages('setting.key970'/*权限详情：可以指定订票专员及订票管理员*/),
          newPermissionNeedShow: false,//新权限启用之后，是否显示
          cover: bookerImg
        },
        {
          name: messages('setting.key971'/*收单*/),
          path: menuRoute.getRouteItem('role-setting-receipt').url,
          title: messages('setting.key972'/*收单人员*/),
          description: messages('setting.key973'/*适用于收单人员管理*/),
          detail: messages('setting.key974'/*权限详情：可以指定收单人员或者收单管理员*/),
          newPermissionNeedShow: true,//新权限启用之后，是否显示
          cover: RoleReceiptImg
        },
        {
          name: messages('setting.key975'/*数据*/),
          path: menuRoute.getRouteItem('role-setting-data').url,
          title: messages('setting.key976'/*数据专员*/),
          description: messages('setting.key977'/*适用于数据专员管理*/),
          detail: messages('setting.key978'/*权限详情：可以指定数据专员*/),
          newPermissionNeedShow: false,//新权限启用之后，是否显示
          cover: dataImg,
          needHide: !this.props.tenantMode
        },
      ],
    };
  }

  componentDidMount() {
  }

  //点击卡片去详情
  goToRoleDetail = (e, path) => {
    this.context.router.push(path);
  }

  renderRoleListEnter = (arr) => {
    let list =[];
    let user = this.props.user;
    if(user.enableNewPermission){
      list = arr.filter(item => {
        if(item.newPermissionNeedShow){
          return item;
        }
      })
    }else {
      list = arr;
    }
    return list.map((item,index) => {
      if (!item.needHide) {
        return (
          <Card
            key={index}
            className="f-left role-receipt-card-item"
            onClick={(e) => {
              this.goToRoleDetail(e, item.path)
            }}
            hoverable
            style={{width: 240}}
            cover={<div className="role-receipt-img"><img alt="helios" src={item.cover}/></div>}
          >
            <Meta
              title={
                <div className="title">
                  <div>{item.title}</div>
                  <div className="description">{item.description}</div>
                </div>
              }
              description={item.detail}
            />
          </Card>
        )
      }
    })
  }

  render() {
    return (
      <div className="setting-role-setting">
        {
          this.renderRoleListEnter(this.state.roleDetails)
        }
        <div className="clear" />
      </div>
    )
  }
}

RoleSetting.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    company: state.login.company,
    tenantMode: state.main.tenantMode,
  }
}

export default connect(mapStateToProps)(RoleSetting);
